画像表示の不具合 異常な縦長に表示される
-
現在、過去記事の一部（と言ってもかなりの数）で、「4枚以上の挿入画像がある場合、3枚までは正常に表示されるのに、4枚目以降が異常に縦に引き延ばされて表示される」不具合に困っています。
ブラウザによる違いはありません。サムネはクリックすれば正常に表示されます。エラーが起きている画像を少しいじってセーブし直すと正常に戻ります。
ChatGPTにソースを見せて訊ねたところ、
WordPressが画像の遅延読み込み（lazy loading）を高速化するため、loading=”lazy”
sizes=”auto, …”
を挿入したために起きた問題で、すでに古い記事との相性に問題があるという報告も上がっているようです。
4枚目以降だけが問題なのはこの部分が遅延読み込みの対象となり、その際、
contain-intrinsic-size:3000px 1500px
という仮サイズが設定されるのが古い記事だとおかしくなるかららしいです。
とりあえずhtml自体はまったく問題はないようですし、大量の記事のあるサイトなのですべてを手動で直すのは無理ですし、Wordpress.comの側で対応できる問題だと思うのですが、何か対策は取られているのでしょうか？ヘルプが必要なブログは (ログイン中のユーザーにのみ表示) です。
-
ChatGPTを使いこなしてらっしゃいますから、不安はありませんが。以下は、私が育てているGeminiの専属AIアシスタントに「contain-intrinsic-size:3000px 1500px」とだけコードを投げて、返ってきた回答です。
このコードは、WordPressのコア（またはGutenberg）によって自動的に追加されるスタイルです。
sizes=auto属性が設定された画像に対するレイアウトの崩れ（レイアウトシフト）を防ぐためのものであり、通常は削除したり変更したりする必要はありません。このスタイルの役割と詳細
- 動作: ブラウザが画像の正しいサイズを読み込んで表示するまで、
contain-intrinsic-sizeプロパティを使ってあらかじめ仮の高さ（3000px × 1500px）を確保します。 - 目的: ページの読み込み中に画像サイズが確定せず、文字やコンテンツがガクッと下に押し出される「レイアウトシフト」を防ぐために設計されています。
- 背景: これは WordPress Trac Ticket 62731 の議論を元に組み込まれた、比較的新しい最適化機能です。
このスタイルがサイトの表示に悪影響を及ぼしている場合は、テーマのfunctions.phpなどで該当タグを制御・無効化することも可能です。
もし特定のページや環境で表示の乱れなど、何らかの問題やエラーが発生している場合は、以下の詳細を教えていただければ具体的な解決策をご提案します：
- 問題が起きているページのURL
- 実際に起こっている現象（画像が大きすぎる、レイアウトが崩れるなど）
- 使用しているテーマやプラグイン
- 動作: ブラウザが画像の正しいサイズを読み込んで表示するまで、
-
お返事ありがとうございました。
実はこの質問を投稿したときはランダムに表示したページのうち半数近くでエラーが発生していたのですが、それはすべて自分で修正してしまいました。
今同じエラーのページを探したのですがなぜか見つからず、発生条件はわかっていません。
ですからとりあえずこのトピックは解決済みということにさせていただきます。また困ったことがありましたら質問させていただくかもしれません。 -
10日間様子見してたのですが、新しい投稿記事が公開されれば解消すると考えてのことです。毎日更新すれば、ある日戸惑うとはなりませんよ。私は毎日のブログ更新はAI任せです。ブログ記事を作る楽しさはAIとのやり取りに完全移行しています。
WordPress.com 日本語フォーラム 